{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7EtZRebrTCzD"
      },
      "source": [
        "# Opossum search\n",
        "\n",
        "<table align=\"left\">\n",
        "  <td>\n",
        "    <a target=\"_blank\" href=\"https://colab.research.google.com/github/google-gemini/cookbook/blob/main/examples/Opossum_search.ipynb\"><img src=\"https://www.tensorflow.org/images/colab_logo_32px.png\" />Run in Google Colab</a>\n",
        "  </td>\n",
        "</table>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mZsD3pqETKMV"
      },
      "source": [
        "This notebook contains a simple example of generating code with the Gemini API and Gemini 1.5 Pro. Just for fun, you'll prompt the model to create a web app called \"Opossum Search\" that searches Google with \"opossum\" appended to the query."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "5kHESAVZcZQD"
      },
      "source": [
        "<img src=\"https://storage.googleapis.com/generativeai-downloads/images/opossum_search.jpg\" alt=\"An image of the opossum search web app running in a browser\" width=\"500\"/>\n",
        "\n",
        "> The opossum image above is from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Opossum_2.jpg), and shared under a CC BY-SA 2.5 license."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 11,
      "metadata": {
        "id": "UyZKDjRs-FN5"
      },
      "outputs": [],
      "source": [
        "!pip install -q -U google-generativeai"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 12,
      "metadata": {
        "id": "F0DZNupF-Lfj"
      },
      "outputs": [],
      "source": [
        "import google.generativeai as genai"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Dm7FFjBscek6"
      },
      "source": [
        "## Set up your API key\n",
        "\n",
        "To run the following cell, your API key must be stored it in a Colab Secret named `GOOGLE_API_KEY`. If you don't already have an API key, or you're not sure how to create a Colab Secret, see the [Authentication](https://github.com/google-gemini/gemini-api-cookbook/blob/main/quickstarts/Authentication.ipynb) quickstart for an example."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 13,
      "metadata": {
        "id": "IciW45ex-Lo9"
      },
      "outputs": [],
      "source": [
        "from google.colab import userdata\n",
        "GOOGLE_API_KEY=userdata.get('GOOGLE_API_KEY')\n",
        "genai.configure(api_key=GOOGLE_API_KEY)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4V68II0ZeCjz"
      },
      "source": [
        "Prompt the model to generate the web app."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 14,
      "metadata": {
        "id": "mxYn5lUAfsUC"
      },
      "outputs": [],
      "source": [
        "instruction = \"\"\"You are a coding expert that specializes in creating web pages based on a user request.\n",
        "You create correct and simple code that is easy to understand.\n",
        "You implement all the functionality requested by the user.\n",
        "You ensure your code works properly, and you follow best practices for HTML programming.\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 15,
      "metadata": {
        "id": "igrg_SxPfwQ6"
      },
      "outputs": [],
      "source": [
        "prompt = \"\"\"Create a web app called Opossum Search:\n",
        "1. Every time you make a search query, it should redirect you to a Google search\n",
        "with the same query, but with the word opossum before it.\n",
        "2. It should be visually similar to Google search.\n",
        "3. Instead of the google logo, it should have a picture of this opossum: https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg.\n",
        "4. It should be a single HTML file, with no separate JS or CSS files.\n",
        "5. It should say Powered by opossum search in the footer.\n",
        "6. Do not use any unicode characters.\n",
        "Thank you!\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 16,
      "metadata": {
        "id": "-qpqkgTurqYI"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "```html\n",
            "<!DOCTYPE html>\n",
            "<html lang=\"en\">\n",
            "<head>\n",
            "    <meta charset=\"UTF-8\">\n",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
            "    <title>Opossum Search</title>\n",
            "    <style>\n",
            "        body {\n",
            "            font-family: Arial, sans-serif;\n",
            "            margin: 0;\n",
            "            padding: 0;\n",
            "        }\n",
            "        header {\n",
            "            display: flex;\n",
            "            justify-content: center;\n",
            "            align-items: center;\n",
            "            padding: 20px;\n",
            "        }\n",
            "        header img {\n",
            "            width: 272px;\n",
            "            height: auto;\n",
            "        }\n",
            "        form {\n",
            "            display: flex;\n",
            "            justify-content: center;\n",
            "            margin-top: 30px;\n",
            "        }\n",
            "        input[type=\"text\"] {\n",
            "            padding: 10px;\n",
            "            font-size: 16px;\n",
            "            border: 1px solid #ccc;\n",
            "            width: 500px;\n",
            "        }\n",
            "        input[type=\"submit\"] {\n",
            "            padding: 10px 20px;\n",
            "            background-color: #f8f9fa;\n",
            "            border: 1px solid #ccc;\n",
            "            cursor: pointer;\n",
            "        }\n",
            "        footer {\n",
            "            position: fixed;\n",
            "            bottom: 0;\n",
            "            width: 100%;\n",
            "            text-align: center;\n",
            "            padding: 10px;\n",
            "            background-color: #f8f9fa;\n",
            "            font-size: 12px;\n",
            "        }\n",
            "    </style>\n",
            "</head>\n",
            "<body>\n",
            "    <header>\n",
            "        <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg\" alt=\"Opossum Logo\">\n",
            "    </header>\n",
            "    <form action=\"https://www.google.com/search\" method=\"get\">\n",
            "        <input type=\"text\" name=\"q\" placeholder=\"Search with Opossum...\">\n",
            "        <input type=\"submit\" value=\"Search\">\n",
            "    </form>\n",
            "    <footer>Powered by opossum search</footer>\n",
            "    <script>\n",
            "        const form = document.querySelector('form');\n",
            "        form.addEventListener('submit', function(event) {\n",
            "            event.preventDefault();\n",
            "            const query = document.querySelector('input[name=\"q\"]').value;\n",
            "            const newURL = `https://www.google.com/search?q=opossum ${query}`;\n",
            "            window.location.href = newURL;\n",
            "        });\n",
            "    </script>\n",
            "</body>\n",
            "</html>\n",
            "``` \n",
            "\n"
          ]
        }
      ],
      "source": [
        "model = genai.GenerativeModel(\"gemini-1.5-pro-latest\", system_instruction=instruction)\n",
        "response = model.generate_content(prompt)\n",
        "print(response.text)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Im4fvOK5S3-A"
      },
      "source": [
        "## Run the output locally\n",
        "\n",
        "You can start a web server as follows.\n",
        "\n",
        "* Save the HTML output to a file called `search.html`\n",
        "* In your terminal run `python3 -m http.server 8000`\n",
        "* Open your web browser, and point it to `http://localhost:8000/search.html`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_wcKnJKIuBQg"
      },
      "source": [
        "## Display the output in IPython\n",
        "\n",
        "Like all LLMs, the output may not always be correct. You can experiment by rerunning the prompt, or by writing an improved one (and/or better system instructions). Have fun!"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "M6FS75_bi5kP"
      },
      "outputs": [],
      "source": [
        "import IPython\n",
        "code = response.text.split('```')[1][len('html'):]\n",
        "IPython.display.HTML(code)"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "name": "Opossum_search.ipynb",
      "toc_visible": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}
